<!--
 * @Author: your name
 * @Date: 2021-10-19 15:15:07
 * @LastEditTime: 2021-10-22 21:40:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vuec:\Users\86131\Desktop\project\payforknowledge\src\views\Home\shopcar.vue
-->
<template>
  <div class="bg">
    <van-nav-bar title="购物车" right-text="管理" :fixed="true" />
    <div class="main">
      <van-tabs :active="active" title-active-color="#4ab8fa">
        <van-tab :title="'课程' + '(' + shopList.length + ')'">
          <ul class="car" v-for="(item, index) in shopList" :key="item.id">
            <li>
              <div class="select">
                <input
                  type="checkbox"
                  :value="index"
                  :checked="ischecked"
                  @click="fn(index, $event)"
                />
              </div>
              <div>
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="message">
                <div class="top">{{ item.title }}</div>
                <div class="bot">价格：{{ item.price }}.00元</div>
              </div>
              <div class="soldOut">
                <span>已售{{ item.num }}</span>
              </div>
            </li>
          </ul>
        </van-tab>
        <van-tab title="听书(0)" class="tab-bg">
          <div class="notfound">
            <div class="picture">
              <img src="../../../src/assets/img/NotFound.png" alt="" />
            </div>
            <div class="text">
              <p>此课程还未上架，敬请期待</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="电子书(0)" class="tab-bg">
          <div class="notfound">
            <div class="picture">
              <img src="../../../src/assets/img/NotFound.png" alt="" />
            </div>
            <div class="text">
              <p>此课程还未上架，敬请期待</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <van-submit-bar
      :price="price * 100"
      button-text="支付"
      @submit="onSubmit"
      button-color="#4AB8FA"
    >
      <div>
        <input type="checkbox" :checked="allcheck" @click="allChoose($event)" />
        全选
      </div>
    </van-submit-bar>

    <!-- <div>{{ shopList }}</div> -->
  </div>
</template>

<script>
import { NavBar, Tab, Tabs, SubmitBar } from "vant";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
// import { useStore } from "vuex";
// import { createApp } from "vue";
export default {
  components: {
    VanNavBar: NavBar,
    VanTabs: Tabs,
    VanTab: Tab,
    VanSubmitBar: SubmitBar,
    // VanCheckbox: Checkbox,
    // VanCard: Card,
  },
  setup() {
    const router = useRouter();
    const active = ref(0);
    const ischecked = ref(false);
    const chioos = ref([]);
    const count = ref(0);
    const price = ref(0);
    const allcheck = ref(false);
    const indexList = ref([]);
    let shopList = ref([]);

    const fn = (index, e) => {
      if (e.target.checked) {
        price.value += shopList.value[index].price;

        count.value++;
        indexList.value.push(index);
      } else {
        price.value -= shopList.value[index].price;
        count.value--;
        allcheck.value = false;
        indexList.value.splice(index, 1);
      }

      console.log(count.value);
      if (count.value === shopList.value.length) {
        allcheck.value = true;
        ischecked.value = true;
      } else {
        allcheck.value = false;
      }
    };

    const allChoose = (e) => {
      ischecked.value = !ischecked.value;
      count.value = shopList.value.length;
      // console.log(count.value);
      if (e.target.checked) {
        price.value = 0;
        shopList.value.forEach((el) => {
          price.value += el.price;
        });
        for (let i = 0; i < shopList.value.length; i++) {
          indexList.value.push(i);
        }
      } else {
        price.value = 0;
        count.value = 0;
      }
    };
    const onSubmit = () => {
      console.log(indexList.value);
      router.push({
        name: "pay",
        query: {
          shopList: JSON.stringify(shopList.value),
          price: price.value,
          index: indexList.value,
        },
      });
    };

    const token = localStorage.getItem("token");

    onMounted(async () => {
      await fetch("http://1.116.189.101:3000/cart/get", {
        method: "POST",
        body: `token=${token}`,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then((response) => response.json())
        .then((res) => {
          shopList.value = res.result;
        });
    });

    return {
      fn,
      shopList,
      allChoose,
      allcheck,
      active,
      price,
      onSubmit,
      chioos,
      ischecked,
    };
  },
};
</script>

<style lang="less" scoped>
.main {
  margin-top: 45px;
  margin-bottom: 100px;
  overflow: 0 auto;
}
/deep/.van-ellipsis {
  font-size: 20px;
  color: #fff;
}
/deep/.van-nav-bar__content {
  background: #4ab8fa;
}
/deep/.van-nav-bar__text {
  color: #fff;
}
/deep/.van-tabs__line {
  background: #4ab8fa;
}
/deep/.van-submit-bar__bar {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 50px;
}
/deep/.van-submit-bar__bar {
  background: rgb(255, 255, 255);
  .van-checkbox__label {
    color: #000;
  }
  .van-submit-bar__text {
    span {
      color: #000;
      font-size: 18px;
    }
  }
  .van-button--danger {
    width: 80px;

    .van-button__text {
      color: #fff;
      font-size: 18px;
    }
  }
}

.car {
  padding-top: 20px;
  background-color: #fff;

  li {
    flex: n1;
    display: flex;
    .select {
      display: flex;
      justify-content: center;
      align-items: center;
      input {
        margin: 0 20px;
        font-size: 18px;
      }
    }
    img {
      width: 80px;
      height: 100px;
    }
    .message {
      margin: 0 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 15px;
      padding: 5px 0;
      .top {
        font-weight: 600;
      }

      .bot {
        color: #a6a6a7;
      }
    }
    .soldOut {
      padding-right: 10px;
      flex: 1;
      text-align: right;
      margin-top: 75px;
      span {
        display: inline-block;
        font-size: 14px;
        color: #a6a6a7;
      }
    }
  }
}
// .bg {
//   background: #fff;
//   position: absolute;
//   width: 100%;
//   height: 100%;
// }
.notfound {
  height: 478px;
  padding-top: 140px;
  text-align: center;
  background: #fff;
  .picture {
    img {
      width: 290px;
      height: 240px;
    }
  }
  .text {
    font-size: 18px;
    color: #909090;
    padding-top: 30px;
  }
}
</style>
